/**
 * @Description:
 * @Author bianpengfei
 * @create 2021/6/25 13:11
 */
import React, { PureComponent, Component, useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'antd'
import { useHistory } from 'react-router-dom'
import { useSelector } from 'react-redux'

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '蔡徐坤',
      obj: {
        nae: 1,
        arr: [1, 2]
      }
    }
  }

  setName = () => {
    this.setState({
      name: Math.random().toString(36)
    })
    this.setState({
      name: Math.random().toString(36) + '11'
    })
    this.setState({
      name: Math.random().toString(36) + '22'
    })
  }

  foo = async () => {
    const result1 = await new Promise(resolve => setTimeout(() => resolve('1'), 1000))
    console.log('result1', result1)
  }

  foo2 = async () => {
    const result1 = await new Promise(resolve => setTimeout(() => resolve('2'), 2000))
    console.log('result2', result1)
  }

  noPromise = async () => {
    // return 'new'
    //  setTimeout(() => {
    //   return '1234'
    // }, 500)
    return '123'
  }

  onChangeName = async () => {
    // await this.foo2()
    // await this.foo()
    console.log('onChangeName--before', this.state.name)
    await this.setName()
    console.log('onChangeName--after', this.state.name)
    this.getList()

    console.dir(await this.noPromise())
    console.dir(this.noPromise)
    console.dir(await 1)
  }

  getList = () => {
    console.log('getList', this.state.name)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('更新了-componentDidUpdate')
  }

  render() {
    console.log('render--')
    return (
      <div>
        <h1>当前值是：{this.state.name}</h1>
        <Button type="primary" onClick={this.onChangeName}>
          更改name值
        </Button>
      </div>
    )
  }
}

function useStateDemo() {
  const [count, setCount] = useState(0)
  const [person, setPerson] = useState({})
  // console.log(count, setCount)
  // const _count = useSelector(state => state.count)
  // console.log(history, _count)

  const history = useHistory()

  useEffect(() => {
    // 函数体
    console.log('@@@@@')
    setCount(10)
  }, [])

  useEffect(() => {
    // 函数体
    console.log('@@@@@')
    setCount(10)
  }, [])

  return (
    <div>
      <h2>当前求和：{count}</h2>
      <h2>当前姓名：{person.name}</h2>
      <Button
        type={'primary'}
        onClick={() => {
          setCount(count + 1)
          console.log('值', count)
        }}
      >
        求和
      </Button>
      <Button
        type={'primary'}
        onClick={() => {
          setPerson({
            name: Math.random().toString(32)
          })
          console.log('值', count)
        }}
        style={{ marginLeft: '20px' }}
      >
        更改名称
      </Button>
      <Button
        type={'primary'}
        onClick={() => {
          ReactDOM.unmountComponentAtNode(document.querySelector('#root'))
        }}
        style={{ marginLeft: '20px' }}
      >
        卸载组件
      </Button>

      <Button
        type={'primary'}
        onClick={() => {
          history.push('http://www/baidu.com')
        }}
        style={{ marginLeft: '20px' }}
      >
        利用hooks跳转路由
      </Button>
    </div>
  )
}

export default useStateDemo
